<template>
  <div class="container container-task-todo">
    <FortenVxetableStatic :data="dataList" :columns="columnList"  :btnList="btnList"  :buttonList="buttonList" @userFun="userFun" pkName="name"
                          :searchFieldArr="['busKey']"
                          searchPlaceholder="搜索单号"
                          :defaultSort="defaultSort"
                          :maxHeight="350"
                          ref="todoTable"
    ></FortenVxetableStatic>
  </div>
</template>

<script>
import FortenVxetableStatic from "@/components/common/FortenVxetableStatic.vue";
let dictMap = {
  busTypeNameList: [],
  flowStatusNameList: []
}

export default {
  desc: '待办任务列表',
  name: 'taskTodo',
  props: {
  },
  mounted() {
    this.loadData()
  },
  data() {
    return {
      dataList: [],
      columnList: [
        {field: 'busKey', title: '业务单号', width: 150, sortable: true},
        {field: 'busTypeName', title: '业务类型', width: 100, sortable: true,
          selectType: 'ElSelect',
          selectOptionsFun: () => {
            return dictMap.busTypeNameList
          },
          filter: true
        },
        {field: 'flowStatusName', title: '状态', width: 100,  sortable: true,
          // 内容样式
          getValueClass: (column, row) => {
            if (row.flowStatus == 'start') {
              return 'span-start'
            }
            return  'span-submit'
          },
          selectType: 'ElSelect',
          selectOptionsFun: () => {
            return dictMap.flowStatusNameList
          },
          filter: true
        },
        {field: 'remark', title: '备注',   sortable: true},
        {field: 'flowModifierName', title: '最近处理人', width: 100, sortable: true},
        {field: 'flowModified', title: '最近处理时间', width: 160, sortable: true},
      ],

      //按钮列表
      btnList: [{
        key: 'handle',
        icon: 'el-icon-view',
        size: 'mini',
        type: 'success',
        style: {padding: '6px'},
        title: '处理'
      }],

      //按钮列表
      buttonList: [{
        key: 'loadData',
        type: 'primary',
        title: '刷新数据',
        text: '刷新'
      }],

      defaultSort: {
        field: 'flowModified',
        order: 'desc',
      }

    }
  },
  components: {
    FortenVxetableStatic
  },
  methods: {
    //回调函数
    userFun({config, scope}) {
      console.log('taskTodo.config', config, scope)
      switch (config.key) {
        //刷新
        case 'loadData': {
          this.loadData(true)
          break
        }
        //处理
        case 'handle': {
          global.utils.openMenu(scope.row.menuRouteName, {id: scope.row.busId})
          break
        }
      }
    },

    // 查询数据
    loadData(hasLoad = false) {
      let getUrl = `sys/workbench/loadInfo?getKey=getTaskTodo`
      if (hasLoad) {
        this.utilVue.loadShow(true)
      }
      this.$ajax.get(getUrl).then((response) => {
        if (hasLoad) {
          this.utilVue.loadHide()
          this.utilMessage.success('数据刷新完成')
        }
        if (response.code == 0 && response.data) {
          this.dataList = response.data
        }

        let busTypeNameList = []
        let busTypeNameListUnq = []

        let flowStatusNameList = []
        let flowStatusNameListUnq = []
        this.dataList.forEach(item => {
          if (!busTypeNameListUnq.includes(item.busTypeName)) {
            let num = this.dataList.filter(tmp => tmp.busTypeName == item.busTypeName).length

            busTypeNameList.push( { value: item.busTypeName, label: `${item.busTypeName} (${num})` })
            busTypeNameListUnq.push(item.busTypeName)
          }
          if (!flowStatusNameListUnq.includes(item.flowStatusName)) {
            let num = this.dataList.filter(tmp => tmp.flowStatusName == item.flowStatusName).length
            flowStatusNameList.push( { value: item.flowStatusName, label: `${item.flowStatusName} (${num})` })
            flowStatusNameListUnq.push(item.flowStatusName)
          }
        })

        dictMap.busTypeNameList = busTypeNameList
        dictMap.flowStatusNameList = flowStatusNameList
        this.$emit('setSize', this.dataList.length)
      })
    },

    // 查询数据
    getDataSize() {
      return this.dataList.length
    }
  }
}
</script>

<style lang="scss">
.span-start{
  color: #fff;
  background: #999999;
  padding: 3px 5px;
  width: 42px;
  margin-left: 20px;
}

.span-submit{
  color: #fff;
  background: #FF6600;
  padding: 3px 5px;
  width: 42px;
  margin-left: 13px;
}

.container-task-todo{
  margin-top: -12px;
  .vxe-toolbar{
    height: auto !important;
  }
}
</style>
